<template>
    <div class="p-4 md:p-6 bg-white border-b border-neutral-medium/30">
        <h3 class="text-lg font-semibold mb-6">流程概览</h3>

        <!-- 流程步骤时间线 (桌面版) -->
        <div class="hidden md:block relative">
            <!-- 连接线 -->
            <div class="process-connector left-[10%] right-[10%] process-connector-active" style="width: 80%"></div>

            <div class="flex justify-between relative z-10">
                <div v-for="(step, index) in steps" :key="index" class="flex flex-col items-center w-1/6">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center text-white mb-3"
                        :class="step.status === 'active' ? 'bg-primary' : step.status === 'completed' ? 'bg-success' : 'bg-neutral-medium'">
                        <i :class="step.icon"></i>
                    </div>
                    <h4 class="text-sm font-medium text-center">{{ step.title }}</h4>
                    <p class="text-xs text-neutral text-center mt-1">{{ step.time }}</p>
                </div>
            </div>
        </div>

        <!-- 流程步骤列表 (移动版) -->
        <div class="md:hidden mt-4 space-y-4">
            <div v-for="(step, index) in steps" :key="index" class="flex items-start">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-white mr-3 mt-0.5 flex-shrink-0"
                    :class="step.status === 'active' ? 'bg-primary' : step.status === 'completed' ? 'bg-success' : 'bg-neutral-medium'">
                    <i :class="step.icon" class="text-sm"></i>
                </div>
                <div>
                    <h4 class="text-sm font-medium">{{ index + 1 }}. {{ step.title }}</h4>
                    <p class="text-xs text-neutral mt-1">{{ step.description }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
interface ProcessStep {
    title: string
    icon: string
    time: string
    description: string
    status: 'completed' | 'active' | 'pending'
}

const steps: ProcessStep[] = [
    {
        title: '案件提交',
        icon: 'fa fa-file-text-o',
        time: '0-1个工作日',
        description: '申请人提交争议案件及相关证据材料，0-1个工作日',
        status: 'completed'
    },
    {
        title: '材料审核',
        icon: 'fa fa-check-circle-o',
        time: '1-2个工作日',
        description: '审核案件材料完整性和有效性，1-2个工作日',
        status: 'completed'
    },
    {
        title: '双方调解',
        icon: 'fa fa-exchange',
        time: '3-5个工作日',
        description: '组织争议双方进行调解协商，3-5个工作日',
        status: 'completed'
    },
    {
        title: '案件裁决',
        icon: 'fa fa-gavel',
        time: '2-3个工作日',
        description: '根据证据和调解情况作出裁决，2-3个工作日',
        status: 'active'
    },
    {
        title: '结果执行',
        icon: 'fa fa-check-square-o',
        time: '根据情况而定',
        description: '监督裁决结果的执行情况，根据情况而定',
        status: 'pending'
    }
]
</script>

<style scoped>
.process-connector {
    @apply absolute top-1/2 h-1 -translate-y-1/2 bg-neutral-medium/30 z-0;
}

.process-connector-active {
    @apply bg-primary transition-all duration-700;
}
</style>
